<template>
	<div class="del-wrap">
		<slot></slot>
		<div v-if="showClose" class="icon-close" @click.stop="handleClose">
			<el-icon><CloseBold /></el-icon>
		</div>
	</div>
</template>

<script lang="ts">
export default defineComponent({
	props: {
		showClose: {
			type: Boolean,
			default: true,
		},
	},
	emits: ['close'],
	setup(props, { emit }) {
		const handleClose = () => {
			emit('close');
		};
		return {
			handleClose,
		};
	},
});
</script>

<style scoped lang="scss">
.del-wrap {
	position: relative;
	&:hover > .icon-close {
		display: flex;
	}
	.icon-close {
		display: none;
		position: absolute;
		top: -8px;
		right: -8px;
		width: 16px;
		height: 16px;
		background-color: rgba(0, 0, 0, 0.3);
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		color: #fff;
		cursor: pointer;
	}
}
</style>
